<template>
	<div style="width: 100%;height: 100%;">
		<el-container>
			<el-main>
				<el-row>
					<el-form :model="formInline">
						<el-row>
							<el-col :span="4">
								<el-form-item>
									<span><a class="RedStar">*</a> 病历号: </span>
									<el-input v-model="formInline.medicalNum" placeholder="病历号" style="width:50%" @clear="clear()" clearable></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="2">
								<el-button @click="getPatient()">搜索</el-button>
							</el-col>
						</el-row>

						<el-row>
							<el-col :span="2">
								<el-form-item>
									<span style="text-align: left; font-size: large;"> 挂号信息</span>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row>
							<el-col :span="2" style="text-align: right; ">
								<el-form-item>
									<a class="RedStar">*</a> 姓名:
								</el-form-item>
							</el-col>
							<el-col :span="2" style="text-align: left;">
								<el-input v-model="formInline.name" placeholder="姓名" clearable></el-input>
							</el-col>
							<el-col :span="2" style="text-align: right; ">
								<el-form-item>
									<a class="RedStar">*</a> 性别:
								</el-form-item>
							</el-col>
							<el-col :span="2" style="text-align: left;">
								<el-select v-model="formInline.sex" placeholder="性别">
									<el-option label="男" value="man"></el-option>
									<el-option label="女" value="woman"></el-option>
								</el-select>
							</el-col>
							<el-col :span="3" style="text-align: right; ">
								<el-form-item>
									年龄:
								</el-form-item>
							</el-col>
							<el-col :span="2" style="text-align: left;">
								<el-input v-model="formInline.age" placeholder="年龄" clearable></el-input>
							</el-col>
							<el-col :span="3" style="text-align: right; ">
								<el-form-item>
									身份证号:
								</el-form-item>
							</el-col>
							<el-col :span="4" style="text-align: left;">
								<el-input v-model="formInline.ID" placeholder=" 身份证号" clearable></el-input>
							</el-col>
						</el-row>
						<el-row>
							<el-col :span="2" style="text-align: right; ">
								<el-form-item>
									住址:
								</el-form-item>
							</el-col>
							<el-col :span="2" style="text-align: left;">
								<el-input v-model="formInline.address" placeholder="住址" clearable></el-input>
							</el-col>
							<el-col :span="2" style="text-align: right; ">
								<el-form-item>
									出生日期:
								</el-form-item>
							</el-col>
							<el-col :span="3" style="text-align: left;">
								<el-date-picker type="date" placeholder="选择日期" v-model="formInline.birthDate" style="width: 100%;"></el-date-picker>
							</el-col>
							<el-col :span="2" style="text-align: right; ">
								<el-form-item>
									<a class="RedStar">*</a> 看诊日期:
								</el-form-item>
							</el-col>
							<el-col :span="3" style="text-align: left;">
								<el-date-picker type="date" placeholder="选择日期" v-model="formInline.lookDate" style="width: 100%;" disabled></el-date-picker>
							</el-col>
							<el-col :span="2" style="text-align: right; ">
								<el-form-item>
									<a class="RedStar">*</a> 午别:
								</el-form-item>
							</el-col>
							<el-col :span="2" style="text-align: left;">
								<el-input v-model="formInline.farewall" placeholder="午别" disabled></el-input>
							</el-col>
						</el-row>
						<el-row>
							<el-col :span="2" style="text-align: right; ">
								<el-form-item>
									<a class="RedStar">*</a> 科室:
								</el-form-item>
							</el-col>
							<el-col :span="2" style="text-align: left;">

								<el-select v-model="formInline.department" placeholder="科室" @change="department($event)">
									<el-option :value="Register.department" v-for="(Register,index) in Register" :key="index" :label="Register.department">
									</el-option>
								</el-select>

							</el-col>
							<el-col :span="2" style="text-align: right; ">
								<el-form-item>
									<a class="RedStar">*</a> 号别:
								</el-form-item>
							</el-col>
							<el-col :span="2" style="text-align: left;">
								<el-select v-model="formInline.numberCate" placeholder="号别" @change="doctor($event)">
									<el-option :value="children.numberCate" v-for="children in numCateCh" :label="children.numberCate">
									</el-option>

								</el-select>
							</el-col>
							<el-col :span="3" style="text-align: right; ">
								<el-form-item>
									<a class="RedStar">*</a> 医生:
								</el-form-item>
							</el-col>
							<el-col :span="2" style="text-align: left;">
								<el-select v-model="formInline.doctor" placeholder="医生">
									<el-option :value="children.doctor" v-for="children in doctorCh " :label="children.doctor">
									</el-option>
								</el-select>
							</el-col>
							<el-col :span="3" style="text-align: right; ">
								<el-form-item>
									初始号额:
								</el-form-item>
							</el-col>
							<el-col :span="2" style="text-align: left;">
								<el-input v-model="formInline.initialNum" placeholder="初始号额" disabled></el-input>
							</el-col>
						</el-row>
						<el-row>

							<el-col :span="2" style="text-align: right; ">
								<el-form-item>
									已用号额:
								</el-form-item>
							</el-col>
							<el-col :span="2" style="text-align: left;">
								<el-input v-model="formInline.usedNum" placeholder="已用号额" disabled></el-input>
							</el-col>
							<el-col :span="2" style="text-align: right; ">
								<el-form-item>
									<a class="RedStar">*</a> 费用:
								</el-form-item>
							</el-col>
							<el-col :span="2" style="text-align: left;">
								<el-input v-model="formInline.fee" placeholder="费用"></el-input>
							</el-col>
							<el-col :span="3" style="text-align: right; ">
								<el-form-item>
									<a class="RedStar">*</a> 收费方式:
								</el-form-item>
							</el-col>
							<el-col :span="2" style="text-align: left;">
								<el-select v-model="formInline.charge" placeholder="收费方式">
									<el-option label="医保" value="ordinary"></el-option>
									<el-option label="自费" value="expert"></el-option>
								</el-select>
							</el-col>
						</el-row>
						<br />
						<el-row>
							<el-col :span="24">
								<el-form-item>
									<el-button style="width: 100px; height: 50px;">
										挂号
									</el-button>
								</el-form-item>
							</el-col>
						</el-row>
					</el-form>
				</el-row>
			</el-main>
		</el-container>
	</div>
</template>

<script>
	export default {

		mounted: function() {
			this.formInline.lookDate = new Date();
			var hour = new Date().getHours();
			if (hour >= 12)
				this.formInline.farewall = "下午";
			else
				this.formInline.farewall = "上午";
           this.$axios.get('http://localhost:8080/Register.json').then((result) => {
            		this.Register = result.data; //写法固定
            	
            
            	}).catch((err) => {
            		console.log(err);
            	})
		},

		data() {
			return {
				formInline: {
					name: '',
					region: '',
					department: '',
					numberCate: '',
					doctor: '',
					lookDate: '',
					farewall: '',
					age: '',
					medicalNum: '',
					ID:'',
					sex: '',
					address: ''

				},
				Register: {},
				numCateCh: {},
				doctorCh: {},
				patientInfo: {}
			}
		},
		methods: {
			onSubmit() {
				console.log('submit!');
			},
			
			department(event) {
				this.formInline.numberCate = '';
				this.formInline.doctor = '';
				let obj = {};
				obj = this.Register.find((item) => {
					return item.department === this.formInline.department;
				});
				this.numCateCh = obj.children;
			},
			
			doctor(event) {
				this.formInline.doctor = '';
				let obj = {};

				obj = this.numCateCh.find((item) => {
					return item.numberCate === this.formInline.numberCate;
				});
				this.doctorCh = obj.children;
				console.log(doctorCh);
			},
			
			getPatient() {
				this.$axios.get('http://localhost:8080/PatientInfo.json').then((result) => {
                    this.formInline.name = "";
                    this.formInline.sex = "";
                    this.formInline.age = "";
                    this.formInline.ID ="";
                    this.formInline.address = "";
					let obj = {};
					obj = result.data.find((item) => {
						return item.medicalNum === this.formInline.medicalNum;
					});
					if (obj) {
						this.formInline.name = obj.name;
						this.formInline.sex = obj.sex;
						this.formInline.age = obj.age;
						this.formInline.ID = obj.ID;
						this.formInline.address = obj.address;
					} else {
						alert("查无此号！");
					}

				}).catch((err) => {
					console.log(err);
				});
},
              clear(){
				  this.formInline=[];
				  this.formInline.lookDate = new Date();
				  var hour = new Date().getHours();
				  if (hour >= 12)
				  	this.formInline.farewall = "下午";
				  else
				  	this.formInline.farewall = "上午";
			    }
			
			
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>


</style>
